@import "../style/mixins/hairline.less";

.am-amount {
  box-sizing: border-box;
  width: 100%;
  padding: @v-spacing-large @h-spacing-large;
  padding: var(--am-amount-padding-vertical, @v-spacing-large) var(--am-amount-padding-horizontal, @h-spacing-large);
  background: @color-fill-grey-inverse;
  background: var(--am-amount-background, @color-fill-grey-inverse);

  .a-input-content {
    /* stylelint-disable-next-line */
    font-family: @font-family-alipay-number, DIN Alternate;
    font-size: @font-size-amount-largenumber;
    font-size: var(--am-amount-content-font-size, @font-size-amount-largenumber);
    line-height: @line-height-base;
    line-height: var(--am-amount-content-line-height, @line-height-base);
    font-weight: 500;
  }

  .a-input {
    padding: 0 @h-spacing-standard;
    padding: 0 var(--am-amount-a-input-padding, @h-spacing-standard);
  }

  &-title {
    line-height: @line-height-base;
    line-height: var(--am-amount-title-line-height, @line-height-base);
    color: @color-text-title;
    color: var(--am-amount-title-color, @color-text-title);
    font-size: @font-size-list;
    font-size: var(--am-amount-title-font-size, @font-size-list);
  }

  &-synthetic {
    display: flex;
    align-items: baseline;
  }

  &-input {
    box-sizing: content-box;
    margin-top: @size-6;
    margin-top: var(--am-amount-value-margin-top, @size-6);
    padding-bottom: @v-spacing-standard;
    padding-bottom: var(--am-amount-input-padding-bottom, @v-spacing-standard);
    display: flex;
    align-items: baseline;
    width: 100%;
    height: 50px;
    position: relative;
    font-size: @font-size-amount-core;
    line-height: @line-height-base;
    line-height: var(--am-amount-input-line-height, @line-height-paragraph);
    .hairline("bottom");
  }

  &-symbol {
    width: 18px;
    /* stylelint-disable font-family-no-missing-generic-family-keyword */
    font-family: PingFang SC;
    font-size: @font-size-amount-large;
    font-size: var(--am-amount-symbol-font-size, @font-size-amount-large);
    line-height: @line-height-base;
    color: @color-text-title;
    color: var(--am-amount-symbol-color, @color-text-title);
    align-self: flex-start;
    margin-top: 17px;
  }

  &-placeholder {
    color: @color-text-weak;
    color: var(--am-amount-placeholder-color, @color-text-weak);
    font-size: @font-size-amount-large;
    font-size: var(--am-amount-placeholder-font-size, @font-size-amount-large);
    line-height: @line-height-base;
    line-height: var(--am-amount-symbol-line-height, @line-height-base);
    font-family: PingFang;
    position: absolute;
    top: 15px;
    left: 0;
    height: @font-size-amount-large;
    height: var(--am-amount-placeholder-font-size, @font-size-amount-large);
    display: flex;
    z-index: 0;
    align-items: flex-end;
  }

  &-value {
    box-sizing: border-box;
    z-index: 2;
    height: 100%;
    vertical-align: middle;
    background-color: transparent;
    font-weight: 250;
  }

  &-clear {
    visibility: hidden;
    width: 28px;
    height: 28px;
    align-self: center;
    margin-top: @v-spacing-standard;

    &-icon {
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
    }

    &-show {
      visibility: visible;
    }
  }

  &-footer {
    padding-top: @v-spacing-large;
    padding-top: var(--am-amount-footer-padding-top, @v-spacing-large);
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: @line-height-base;
    line-height: var(--am-amount-footer-line-height, @line-height-base);
  }

  &-extra {
    flex: 1;
    line-height: @line-height-base;
    line-height: var(--am-amount-extra-line-height, @line-height-base);
    color: @color-text-subtitle;
    color: var(--am-amount-extra-color, @color-text-subtitle);
    font-size: @font-size-subtitle;
    font-size: var(--am-amount-extra-font-size, @font-size-subtitle);
  }

  &-btn {
    color: @color-text-primary;
    color: var(--am-amount-btn-font-color, @color-text-primary);
    line-height: @line-height-base;
    line-height: var(--am-amount-btn-line-height, @line-height-base);
    font-size: @font-size-subtitle;
    font-size: var(--am-amount-btn-font-size, @font-size-subtitle);
  }
}
